<template>
  <div class="nav-type">
    <div v-if="showTypeInput">
      <div class="nav-item-title" v-show="haveTypeName">
        <slot name="typeName"></slot>
      </div>
      <el-input
        class="type-input"
        v-show="!haveTypeName"
        placeholder="请输入分类名称"
        v-model="typeInfo.type_name"
        @keyup.enter.native="inputTypeName"
        clearable
      >
      </el-input>
    </div>
    <div class="el-icon-plus type" @click="addType"></div>
  </div>
</template>

<script>
export default {
  props: {
    type_id: {
      type: String,
    },
  },
  emits: ["typeClick"],
  data() {
    return {
      showTypeInput: false,
      haveTypeName: false,
      typeInfo: {
        type_name: "",
        type_order: "",
      },
    };
  },
  methods: {
    addType() {
      this.showTypeInput = true;
    },
    inputTypeName() {
      this.$emit("typeClick", this.typeInfo);
      this.showTypeInput = false;
      this.haveTypeName = false;
      this.typeInfo.type_name = "";
    },
  },
};
</script>

<style scoped lang="less">
.nav-type {
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  width: 31%;
  height: 45%;
  border-radius: 40px;
  margin: 5px 50px;
  // margin-left: 95px;
  .nav-item-title {
    font-size: 20px;
    width: 120px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(0, 0, 0, 0.6);
    margin: 0 auto;
    margin-top: 6px;
    padding: 3px 0;
    border-radius: 15px;
  }

  .list-item {
    width: 120px;
    height: 120px;
  }
  .type {
    position: absolute;
    width: 90px;
    height: 90px;
    font-size: 45px;
    color: rgba(78, 102, 116);
    line-height: 90px;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: rgba(247, 247, 247, 0.4);
    margin: 0 auto;
    margin-top: 10px;
  }
  .type:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }
}
.type-input {
  margin-top: 10px !important;
  width: 40% !important;
  // height: 30px !important;
}
.el-input__inner {
  padding: 0 6px !important;
}
</style>
